﻿@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@namespace MudBlazor.Docs.Examples
@inject HttpClient httpClient

<MudTable Items="@Elements">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
    </ToolBarContent>
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <PagerContent>
            <MudTablePager PageSizeOptions="new int[] { 10, 25, 50, 100, int.MaxValue }"
                           RowsPerPageString="@rowsPerPageString"
                           InfoFormat="@infoFormat"
                           AllItemsText="@allItemsText"
                           HorizontalAlignment="@horizontalAlignment"
                           HideRowsPerPage="@hideRowsPerPage"
                           HidePageNumber="@hidePageNumber"
                           HidePagination="@hidePagination" />
    </PagerContent>
</MudTable>

<div class="d-flex flex-wrap mt-4">
    <MudSelect T="HorizontalAlignment" Label="HorizontalAlignment" @bind-Value="horizontalAlignment">
        <MudSelectItem Value="HorizontalAlignment.Center" />
        <MudSelectItem Value="HorizontalAlignment.Left" />
        <MudSelectItem Value="HorizontalAlignment.Right" />
        <MudSelectItem Value="HorizontalAlignment.Start" />
        <MudSelectItem Value="HorizontalAlignment.End" />
    </MudSelect>
</div>
<div class="d-flex flex-wrap mt-4">
    <MudTextField Label="RowsPerPageString" @bind-Value="rowsPerPageString" Immediate/>
     <MudTextField Class="ml-4" Label="AllItemsText" @bind-Value="allItemsText" Immediate />
     <MudTextField Class="ml-4" Label="InfoFormat" @bind-Value="infoFormat" Immediate />
</div>
<div class="d-flex flex-wrap mt-4">
     <MudSwitch @bind-Value="hideRowsPerPage" Color="Color.Tertiary">HideRowsPerPage</MudSwitch>
     <MudSwitch @bind-Value="hidePageNumber" Color="Color.Primary">HidePageNumber</MudSwitch>
     <MudSwitch @bind-Value="hidePagination" Color="Color.Secondary">HidePagination</MudSwitch>
</div>

@code {
    private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Right;
    private bool hidePageNumber;
    private bool hidePagination;
    private bool hideRowsPerPage;
    private string rowsPerPageString = "Rows per page:";
    private string infoFormat = "{first_item}-{last_item} of {all_items}";
    private string allItemsText = "All";

    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }
}
